<template>
  <div class="carousel">
    <div class="carousel-images" ref="carouselImages">
      <img :src="processedImage(images[currentIndex])" class="carousel-image" ref="currentImage" @click="showOriginalImage(images[currentIndex])" />
    </div>
    <div>
      <div class="carousel-controls">
        <button @click="prevImage" class="carousel-button">❮</button>
        <button @click="nextImage" class="carousel-button">❯</button>
      </div>
    </div>




    <div v-if="isImageClicked">
      <img :src="clickedImage" class="full-size-image" />
    </div>
  </div>
  <div class="image-selector">
    <button @click="switchImage(0, 'left')" :style="getImageButtonStyle(0)" class="image-button"></button>
    <button @click="switchImage(1, 'left')" :style="getImageButtonStyle(1)" class="image-button"></button>
  </div>
</template>

<script setup lang="ts">
import { v3ImgPreviewFn } from 'v3-img-preview'
import { ref } from 'vue';
import gsap from 'gsap';

const images = [
  'https://resource.obsbothk.com/DownLoad/Picture/starbucket/cover-01.webp',
  'https://resource.obsbothk.com/DownLoad/Picture/starbucket/cover-03.webp'
];

const currentIndex = ref(0);
const isImageClicked = ref(false);
const clickedImage = ref(null);

// 显示原始大小图片
const showOriginalImage = (image: string) => {
  v3ImgPreviewFn({
    images: [image],
    index: 0,
    onClose: () => {
      isImageClicked.value = false;
    }
  });
  isImageClicked.value = true;
};


// 处理图片 URL，添加参数
const processedImage = (imageUrl: string) => {
  return `${imageUrl}`;
};

// 切换到下一张图片
const nextImage = () => {
  const nextIndex = (currentIndex.value + 1) % images.length;
  switchImage(nextIndex, 'left');
};

// 切换到上一张图片
const prevImage = () => {
  const prevIndex = (currentIndex.value - 1 + images.length) % images.length;
  switchImage(prevIndex, 'right');
};

// 切换图片的动画
const switchImage = (nextIndex: number, direction: string) => {
  const currentImage = document.querySelector('.carousel-image');
  const newImage = new Image();
  newImage.src = processedImage(images[nextIndex]);

  // 根据方向设置新图片的位置
  const offset = direction === 'left' ? '100%' : '-100%';
  gsap.set(currentImage, { x: offset, opacity: 0, duration: 0.3 }); // 将当前图片移出视口并隐藏

  // 当新图片加载完成后，设置新图片并执行动画
  newImage.onload = () => {
    // 更新当前索引
    currentIndex.value = nextIndex;
    // 使用 GSAP 实现缓冲效果的动画
    gsap.fromTo(currentImage,
        { x: offset, opacity: 0 },
        { x: 0, opacity: 1, duration: 1, ease: "power1.inOut" } // 缓动效果
    );
  };
};

// 获取按钮的背景样式
const getImageButtonStyle = (index: number) => {
  return {
    backgroundImage: `url(${processedImage(images[index])})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  };
};
</script>

<style scoped>
.carousel {
  position: relative;
  width: 100%; /* 宽度自适应 */
  max-width: 900px; /* 最大宽度限制 */
  margin: auto; /* 居中 */
  overflow: hidden;
}

.carousel-images {
  position: relative; /* 相对定位 */
}

.carousel-image {
  max-width: 100%; /* 最大宽度为容器宽度 */
  height: auto; /* 高度自适应，保持比例 */
  cursor: pointer;
  transition: opacity 0.5s ease;
  border-radius: 15px;
}

.carousel-image:hover .carousel-controls{

    opacity: 1;

}

.carousel-controls {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 顶部置中 */
  left: 50%; /* 左侧置中 */
  transform: translate(-50%, -50%); /* 居中 */
  z-index: 1; /* 控制按钮在图片上方 */
  display: flex;
  justify-content: space-between;
  width: 100%; /* 宽度100%，覆盖在图片上 */
  padding: 0 10px; /* 左右内边距 */
  opacity: 1;
}

.carousel-button {
  border: none;
  padding: 10px;
  cursor: pointer;
  opacity: 0.7;
}



.full-size-image {
  max-width: 90%;
  max-height: 90%;
}

.image-selector {
  display: flex;
  justify-content: center;
}

.image-button {
  border: none;
  width: 100px;
  height: 60px;
  margin: 20px 5px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
  border-radius: 10px;
}

.image-button:hover {
  opacity: 1;
  border: 3px solid #ea4c89;
}


</style>